
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/sethtmlfontSize.js"></script>
    <link rel="stylesheet" href="./css/shopPage.css">
    <link rel="stylesheet" href="./css/common.css">
    <title>店铺首页</title>
</head>
<body>
    <!--头部-->
    <header class="header">
        <div class="header-left">
            <i></i>
        </div>
        <div class="header-center">
            <span>店铺名</span>
        </div>
        <div class="header-right">
            <a href="./index.html" class="homepage show">首页</a>
            <a href="./login.html" id="login" class="hiden">收藏</a>
        </div>
        <div class="clears"></div>
    </header>
    
    <!--大图显示-->
    <div class="bigImgs">
        <img id="b-img" class="b-img" src="./images/list1.png" alt="">
    </div>
    
    <!--收藏店铺-->
    <div class="collectShop"> 
        <div class="shop-name l">
            <img src="./images/list1.png" alt="">
            <strong>艺匠婚纱</strong>
        </div>
        <div class="collect-btn r">
            <span class="btns">
                <img src="./images/collection_icon_nor.png" alt="">
                <i class="">收藏本店</i>
            </span>
        </div>
        <div class="clears"></div>
    </div>
    <!--店铺详情-->
    <div class="shop-detail">
        <div class="time-detail details">
            <img src="./images/time_icon.png" alt="">
            <span class="det-s">营业时间:</span>
            <i class="work-time">9:00－22:00</i>
        </div>
        <div class="address-detail details">
            <div class="address-detail-l">
                <img src="./images/address.png" alt="">
                <span class="det-s">地址:</span>
                <i class="address puboverflow">龙华新区清湖富茂新村45号</i>
            </div>
            <div class="address-detail-r">
                <i>距离:</i>
                <i>50m</i>
                <i class="arrows"></i>
            </div>
        </div>
        <div class="tel-detail details">
            <img src="./images/phone_icon.png" alt="">
            <span  class="det-s">电话:</span>
            <i class="tel">0755-28765469</i>
        </div>
        <div class="stat-detail">
            <ul class="stat-ul">
                <li class="num-collect">
                    <span class="num-top">115</span>
                    <span class="num-bottom">收藏人数</span>
                    <i></i>
                </li>
                <li class="num-visit">
                    <span class="num-top">115</span>
                    <span class="num-bottom">浏览数</span>
                    <i></i>
                </li>
                <li class="num-goods">
                    <span class="num-top">115</span>
                    <span class="num-bottom">商品数</span>
                </li>
            </ul>
        </div>
    </div>
    
    <!--配送，支付-->
    <div class="distri-pay">
        <img src="./images/renzheng_icon.png" alt="">
        <span class="distri">配送</span>
        <img src="./images/renzheng_icon.png" alt="">
        <span>支持微信支付</span>
        <img src="./images/renzheng_icon.png" alt="">
        <span>支持支付宝</span>
    </div>
    
    <!--商家认证-->
    <div class="shop-register">
        <span class="">商家认证资料</span>
        <i></i>   
    </div>
    
    <!--店铺介绍-->
    <div class="shop-intro">
        <h3>店铺介绍:</h3>
        <p class="">钟爱一生婚纱摄影是深圳市铂爵婚纱摄影有限公司旗下品牌，系中国婚纱摄影“十大杰出企业”，18年的积淀，18年的荣耀，塑造中国婚纱领导品牌。</p>
        
    </div>
    
    <!--本店产品-->
    <div class="shop-goods">
            <hr class="hr-l">
            <span class="shop-express">本店产品</span>
            <hr class="hr-r">
    </div>
    <!--商品列表-->
    <div class="goods-lists">
        <!--大图商品列表-->
        <div class="list right-list">
            <div class="center-list">
                <img src="./images/list1.png" alt="">
                <strong>绿地花海-薰衣草婚礼[天空摄影]</strong>
                <p class="express"><i class="exp-r">配送</i><i>支持手机支付</i></p>
<!--
                <div class="detail-l">
                   <i>50</i><i>m</i> <i class="single">个体</i><img src="/images/vip_icon.png" alt="">
                </div>
                <div class="detail-r">99元/次</div>
-->
                
            </div>
            
        </div>
        
        <div class="list">
            <div class="center-list">
                <img src="./images/list1.png" alt="">
                <strong>绿地花海-薰衣草婚礼[天空摄影]</strong>
                <p class="express"><i  class="exp-r">配送</i><i>支持手机支付</i></p>
<!--
                <div class="detail-l">
                   <i>50</i><i>m</i> <i class="single">个体</i><img src="/images/vip_icon.png" alt="">
                </div>
                <div class="detail-r">99元/次</div>
-->
            </div>
            
        </div>
        <div class="clears"></div>
    </div>
    
    
    <!--电话,消息-->
    <footer class="tel-message">
        <div id="message" class="message commons l">
            <img src="./images/xiaoxi_icon.png" alt="">
            <a class="mess-span" href="">发消息</a>
        </div>
        <div id="tel" class="tel commons r">
            <img src="./images/dianhua_icon.png" alt="">
            <a class="tell-span" href="">打电话</a>
        </div>
    </footer>
    
</body>
<script src="./js/jquery-1.7.2.min.js"></script>
<script>
    $(function(){
        //是否收藏的标志
        var btnFlag=0;
        $(".collect-btn .btns").on("click",function(){
            if(btnFlag<1){
                $(this).css("background","#ccc").find("img").attr("src","./images/collection_icon_press.png");
                $(this).find("i").html("已收藏");
                btnFlag=1;
            }else{
                $(this).css("background","#36c7b7").find("img").attr("src","./images/collection_icon_press.png");
                $(this).find("i").html("收藏本店");
                btnFlag=0;
            }
        });
    });
    
    
</script>
</html>